import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/class/:id',
    name: 'class',
    component: () => import(/* webpackChunkName: "about" */ '../views/Classly.vue')
  },
  {
    // 当 /user/:id/posts 匹配成功
    // UserPosts 会被渲染在 User 的 <router-view> 中
    path: '/view/:id',
    name: 'view',
    component: () => import(/* webpackChunkName: "about" */ '../components/PicDesc.vue'),
  },
  {
    path: '/wallpaper',
    name: 'wallpaper',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/MyWallpaper.vue'),
    children: [
      {
        // 当 /user/:id/profile 匹配成功，
        // UserProfile 会被渲染在 User 的 <router-view> 中
        path: 'love',
        name: 'love',
        component:() => import(/* webpackChunkName: "about" */ '../components/Love.vue'),
      },
      {
        // 当 /user/:id/posts 匹配成功
        // UserPosts 会被渲染在 User 的 <router-view> 中
        path: 'used',
        name: 'used',
        component: () => import(/* webpackChunkName: "about" */ '../components/Used.vue'),
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router
